<template>
  <view class="w100 bg-gray flex-sub flex flex-col">
    <u-navbar
      v-if="isSub"
      :safeAreaInsetTop="true"
      title="商品列表"
      :fixed="true"
      :autoBack="true"
      left-text="返回"
    >
    </u-navbar>
    <view
      :style="{ 'margin-top': isSub ? '30px' : '0' }"
      class="w100 bg-gray flex-sub padding-lr padding-top flex-center flex-direction"
    >
      <u-search
        class="bg-white flex-0 w100 padding"
        shape="square"
        placeholder="请输入商品ID"
        v-model="goods_id"
        @custom="queryList(1)"
        @search="queryList(1)"
      ></u-search>
      <view
        style="margin-bottom: -30px"
        class="bg-white w100 padding-lr text-sm"
      >
        <u-cell :border="false">
          <view class="text-df text-bold" slot="title">订单列表</view>
          <view class="text-grey text-sm" slot="value">总计{{ total }}</view>
        </u-cell>
      </view>
      <z-paging
        class="flex-sub padding-lr bg-white"
        ref="paging"
        :default-page-size="limit"
        v-model="goodsReportList"
        :refresher-enabled="true"
        :auto-clean-list-when-reload="false"
        :auto-scroll-to-top-when-reload="true"
        :show-default-loading-more-text="true"
        loading-more-no-more-text="没有更多了"
        :fixed="false"
        :pagingStyle="{
          height: `calc( 100vh - ${statusBarHeight + tabHeight}px )`,
        }"
        @query="queryList"
      >
        <view
          class="rcl-notice__item"
          v-for="(item, index) in goodsReportList"
          :key="index"
          @click="accountClick(index)"
        >
          <u-cell-group>
            <u-cell :border="false">
              <view class="flex text-cut" slot="title"
                >
                <u-tag :text="item.id" size="mini" type="primary" />
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  {{item.account}}
                </view>
              </view>
              <!-- <view class="flex text-cut" slot="title"
                >
                <u-tag :text="item.id" size="mini" type="primary" />
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  {{item.goods_name}}
                </view>
              </view> -->
              <view
                class="text-sm flex margin-top justify-between"
                slot="label"
              >
                <view class="flex-col">
                  <view>总消耗</view>
                  <view class="item_value">{{ item.cost }}</view>
                </view>
                <view class="flex-col align-center">
                  <view>总销售</view>
                  <view class="item_value">{{ item.sale }}</view>
                </view>
                <view class="flex-col align-end">
                  <view>有效销售</view>
                  <view class="item_value">{{ item.effect_sale }}</view>
                </view>
              </view>
              <view
                class="text-sm flex margin-top justify-between"
                slot="label"
                v-if="isAdmin"
              >
                <view class="flex-col">
                  <view>订单数</view>
                  <view class="item_value">{{ item.order_num }}</view>
                </view>
                <view class="flex-col align-center">
                  <view>ROI</view>
                  <view class="item_value">{{ item.roi }}</view>
                </view>
                <view class="flex-col align-end">
                  <view>有效ROI</view>
                  <view class="item_value">{{ item.effect_roi }}</view>
                </view>
              </view>
            </u-cell>
          </u-cell-group>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { goodsReportList } from "@/api";
import { mapGetters } from "vuex";
export default {
  components: {  },
  props: {
    isSub: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showDetail: false,
      currentInfo: {},
      total: 0,
      page: 1,
      limit: 10,
      goods_id: "",
      statusBarHeight: 10,
      tabHeight: 0,
      goodsReportList: [],
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  onLoad() {},
  methods: {
    accountClick(idx) {
      if (this.isAdmin) return;
      this.currentInfo = this.goodsReportList[idx];
      this.showDetail = true;
    },

    queryList(pageNo, pageSize) {
      this.page = pageNo;
      this.handleGetList();
    },

    handleGetList() {
      goodsReportList({
        page: 1,
        page: this.page,
        page_size: this.limit,
        start_date: dayjs().format("YYYY-MM-DD"),
        end_date: dayjs().format("YYYY-MM-DD"),
        goods_id: this.goods_id==''?null:Number( this.goods_id),
      }).then(({ data }) => {
        this.$refs.paging.complete(data.list);
        this.total = data.total;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
